<template>
  <div id="aboutme">
    <div class="header">
      <div class="head-photo">
        <img src="../assets/imgs/tou.jpg" alt="" />
      </div>
      <div class="tel">1509****464</div>
      <span class="iconfont icon-saoyisao"></span>
      <span class="iconfont icon-lingdang"></span>
      <router-link to="/Set"
        ><span class="iconfont icon-shezhi"></span
      ></router-link>
    </div>
    <div class="content">
      <div class="massage">
        <li>
          <b class="sheng">未升级</b>
          <p>创作中心</p>
        </li>
        <router-link to="/guanzhu">
          <li>
            <b>{{ attentions.length }}</b>
            <p>关注</p>
          </li></router-link
        >
        <!-- <li>
          <b>{{ attentions.length }}</b>
          <p>关注</p>
        </li> -->
        <li>
          <b>0</b>
          <p>赞过</p>
        </li>
        <li>
          <b>0</b>
          <p>收藏</p>
        </li>
      </div>
      <div class="study">
        <h3>学习记录</h3>
        <ul>
          <li>
            <span class="iconfont icon-danciben" style="color: #f64d3d"></span>
            <div class="right">
              <b>单词本</b>
              <p>前去背词>></p>
            </div>
          </li>
          <li>
            <span
              class="iconfont icon-shoucangben"
              style="color: #477bf7"
            ></span>
            <div class="right">
              <b>句子收藏</b>
              <p>例句学习>></p>
            </div>
          </li>
          <li>
            <span
              class="iconfont icon-gangbigongju"
              style="color: #34b2f6; font-size: 25px"
            ></span>
            <div class="right">
              <b>笔记</b>
              <p>高效复习</p>
            </div>
          </li>
          <li>
            <span
              class="iconfont icon-zhaoxiangji"
              style="color: #f94c3e"
            ></span>
            <div class="right">
              <b>拍照历史</b>
              <p>查看历史记录</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="huiyuan">
        <img src="../assets/imgs/ba.jpg" alt="" />
      </div>
      <div class="listen">
        <h3>VIP听力资源</h3>
        <ul>
          <li v-for="vip in viplisten" :key="vip.id">
            <img :src="vip.img" alt="" />
            <b>{{ vip.title }}</b>
            <p>{{ vip.text }}</p>
          </li>
          <!-- <li>
            <img src="../../public/imgs/listen1.jpg" alt="" />
            <b>小王子</b>
            <p>成人看的童话故事</p>
          </li>
          <li>
            <img src="../../public/imgs/listen1.jpg" alt="" />
            <b>小王子</b>
            <p>成人看的童话故事</p>
          </li>
          <li>
            <img src="../../public/imgs/listen1.jpg" alt="" />
            <b>小王子</b>
            <p>成人看的童话故事</p>
          </li>
          <li>
            <img src="../../public/imgs/listen1.jpg" alt="" />
            <b>小王子</b>
            <p>成人看的童话故事</p>
          </li> -->
        </ul>
      </div>
      <div class="vips">
        <h3>VIP听力资源</h3>
        <img src="../../public/imgs/111.jpg" alt="" />
      </div>
      <div class="caidan">
        <ul>
          <li>
            <div class="left">
              <span class="iconfont icon-wode"></span>
              <p>微信服务</p>
            </div>
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            <div class="left">
              <span class="iconfont icon-shoucangben"></span>
              <p>句子收藏</p>
            </div>
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            <div class="left">
              <span class="iconfont icon-wode-wodekecheng"></span>
              <p>离线词典</p>
            </div>
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            <div class="left">
              <span class="iconfont icon-tubiao-fanyi"></span>
              <p>有道人工翻译</p>
            </div>
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            <div class="left">
              <span class="iconfont icon-benzi-copy"></span>
              <p>我的课程</p>
            </div>
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            <div class="left">
              <span class="iconfont icon-wodexiazai"></span>
              <p>我的下载</p>
            </div>
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            <div class="left">
              <span class="iconfont icon-aixin"></span>
              <p>满意度调查</p>
            </div>
            <span class="iconfont icon-jiantou"></span>
          </li>
        </ul>
      </div>
    </div>
    <dibu></dibu>
  </div>
</template>

<script>
import dibu from "../components/dibu.vue";
import axios from "axios";
export default {
  name: "AboutMe",
  components: {
    dibu,
  },
  data() {
    return {
      attentions: [],
      viplisten: [],
    };
  },
  methods: {
    to() {
      this.$router.push("/Set"), this.$router.push("/guanzhu");
    },
  },
  created() {
    axios({
      url: "http://localhost:3000/attentions",
      method: "get",
      params: {},
    }).then((res) => {
      this.attentions = res.data;
    }),
      axios({
        url: "   http://localhost:3000/viplisten",
        method: "get",
        params: {},
      }).then((res) => {
        //res.data直接就是后端返回来的数据，并且是json数据
        this.viplisten = res.data;
      });
  },
};
</script>

<style scoped>
@import url(../assets/iconfont.css);
#aboutme {
  display: flex;
  background-color: #fdfbfb;
}
.header {
  height: 0.7rem;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
}
.header .head-photo {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-left: 0.2rem;
}
.header .head-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.header .tel {
  font-weight: 700;
  font-size: 0.18rem;
  margin-right: 0.3rem;
  margin-left: 0.1rem;
}
.header span {
  font-size: 0.25rem;
  padding: 0 0.1rem;
  font-weight: 700;
}
.icon-shezhi {
  color: #000;
  text-decoration: 0;
}
a {
  text-decoration: 0;
}
.myfooter {
  position: fixed;
  bottom: 0;
  left: 0;
}

.content {
  padding-top: 0.5rem;
  padding-bottom: 0.6rem;
  /* height: 4rem; */
  width: 100%;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.3rem;
}
.content .massage {
  width: 95%;
  height: 0.8rem;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
li {
  list-style: none;
}
.massage li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.massage li .sheng {
  color: #4d62ea;
}

.massage li p {
  color: #929292;
  font-size: 0.1rem;
}
.study {
  width: 100%;
  /* height: 100%; */
  margin-top: 0.2rem;
  background-color: #fff;
  padding: 0.1rem 0;
}
.study ul {
  width: 95%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-left: 0.08rem;
}
.study ul li {
  width: 40%;
  height: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: blueviolet; */
  flex-shrink: 0;
  margin: 0.1rem 0;
  box-shadow: 0.5px 0.5px 10px 0.5px rgb(236, 234, 234);
}
.study ul li span {
  font-size: 0.33rem;
  margin-right: 0.1rem;
}
.study ul li p {
  font-size: 0.13rem;
  color: #929292;
}
.study h3 {
  font-weight: 700;
  font-size: 0.15rem;
  margin-left: 0.2rem;
}
.study ul li b {
  font-size: 0.14rem;
}
.huiyuan {
  width: 90%;
  height: 1.5rem;
}
.huiyuan img {
  width: 95%;
  height: 1.3rem;
}
.listen {
  width: 100%;
}
.listen ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.listen ul li {
  width: 47%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.listen ul li img {
  width: 1.4rem;
  height: 1.6rem;
}
.listen h3 {
  font-weight: 700;
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
  margin-left: 0.2rem;
}
.listen ul li b {
  font-weight: 700;
}
.listen ul li p {
  font-size: 0.14rem;
}
.vips {
  width: 100%;
}
.vips img {
  width: 80%;
  height: 1.2rem;
  margin-left: 0.2rem;
  margin-bottom: 0.1rem;
}
.vips h3 {
  font-weight: 700;
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
  margin-left: 0.2rem;
}
.caidan {
  width: 100%;
}
.caidan ul {
  width: 90%;
  margin-left: 0.2rem;
}
.caidan ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.5rem;
}
.caidan ul li .left {
  display: flex;
}
.caidan ul li .left p {
  margin-left: 0.15rem;
}
.caidan ul li span {
  font-size: 0.25rem;
  font-weight: 700;
}
.caidan ul li p {
  font-weight: 700;
}
</style>
